<style scoped></style>

<template>
    <div>
        <Modal
            title="修改参团信息"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form ref="groupItemForm" label-position="top" :rules="groupItemRole" :model="groupItem">
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="参团用户" prop="creatorUserId">
                            {{!!User?User.name:""}}
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="联系人" prop="linkMan">
                            <Input v-model="groupItem.linkMan" placeholder="请输入联系人姓名"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="手机" prop="phoneNumber">
                            <Input v-model="groupItem.phoneNumber" placeholder="请输入联系人手机号码"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="意向小区" prop="wantVillage">
                            <Input v-model="groupItem.wantVillage" placeholder="请输入你期望的小区"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="意向楼层" prop="wantLayer">
                            <Input v-model="groupItem.wantLayer" placeholder="请输入你期望的楼层"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="意向户型" prop="wantLayout">
                            <Input v-model="groupItem.wantLayout" placeholder="请输入你期望的户型"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import Ajax from "@/lib/ajax";
import AbpBase from "@/lib/abpbase";
import GroupItem from "@/store/entities/groupItem/GroupItem";
import User from "@/store/entities/user";
@Component({
    components: {}
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    groupItem: GroupItem = new GroupItem();
    userList: Array<User> = new Array<User>();

    get User(){
        return this.userList.find(item=>{
            return item.id == this.groupItem.creatorUserId;
        });
    }

    curUser: User = null;
    selectedUser(e){
        if (typeof(e) == "number") {
            this.curUser = this.userList.find(item=>{
                return item.id == e;
            });
            this.groupItem.linkMan = this.curUser.name;
            this.groupItem.phoneNumber = this.curUser.phoneNumber;
        } else {
            this.curUser = null;
            this.groupItem.linkMan = "";
            this.groupItem.phoneNumber = "";
        }
    }
    async created() {
        let rep = await Ajax.get('/api/services/app/User/GetAllList');
        this.userList = rep.data.result;   
    }
    save() {
        (this.$refs.groupItemForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await this.$store.dispatch({
                    type: "groupItem/update",
                    data: this.groupItem
                });
                (this.$refs.groupItemForm as any).resetFields();

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.groupItemForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        } else {
            this.groupItem = Util.extend(true,{},this.$store.state.groupItem.editGroupItem);
        }
    }

    groupItemRole = {
        
        creatorUserId: [
            {
                required: true,
                type: "number",
                message: "请选择参团用户",
                trigger: "change",
            },
        ],
        linkMan: [
            {
                required: true,
                type: "string",
                message: "请输入联系人",
                trigger: "blur",
            },
        ],
        phoneNumber: [
            {
                required: true,
                type: "string",
                message: "请输入手机号",
                trigger: "blur",
            },
            {
                pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
                message: '手机号码格式不正确',
                trigger: "blur",
            },
        ],
    };
}
</script>